<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        Money!
    </title>
    <!--在线引入bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../css/HyoJoo.css">
    <script type="text/javascript" src="../js/accountManage.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>WoW!Money!</h1>
            </div>
        </div>
        <!--          userA             -->
        <div class="row">
            <div class="col-md-12 col-md-offset-3">
                <p>UserA</p>
            </div>
        </div>
        <div class="row">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" class="form-control" id="name" placeholder="输入查询用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="输入查询用户的密码">
                </div>
                <a class="btn btn-default" id="query-user-btn">查询</a>
            </form>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive table-hover" id="user-table">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>余额</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

    <!--    图标         -->
        <div class="row col-md-offset-4" style="margin-bottom: 20px">
            <a id="transfer"><h2>转账</h2></a>
        </div>


    <!--    userB       -->
        <div class="row">
            <div class="col-md-12 col-md-offset-3">
                <p>UserB</p>
            </div>
        </div>
        <div class="row">
            <form class="form-inline" id="form2">
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" class="form-control" id="name2" placeholder="输入查询用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password2" placeholder="输入查询用户的密码">
                </div>
                <a class="btn btn-default" id="query-user-btn2">查询</a>
            </form>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive table-hover" id="user-table2">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>余额</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

<!--********************************存款模态框***************************************************-->
    <!-- Modal -->
    <div class="modal fade" id="deposit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">存款</h4>
                </div>
                <div class="modal-body" id="deposit-modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-6">
                                <p class="form-control-static" id="name-static"></p>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="money" class="col-sm-2 control-label">余额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="money" name="money" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add-money" class="col-sm-2 control-label">存入金额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="add-money" name="add-money">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm-add-money">确认存款</button>
                </div>
            </div>
        </div>
    </div>

    <!--********************************取款模态框***************************************************-->
    <!-- Modal -->
    <div class="modal fade" id="withdrawal-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">取款</h4>
                </div>
                <div class="modal-body" id="withdrawal-modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-6">
                                <p class="form-control-static" id="name-static-withdrawal"></p>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">余额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="money-withdrawal" name="money" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sub-money" class="col-sm-2 control-label">取出金额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="sub-money" name="sub-money">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm-sub-money">确认取款</button>
                </div>
            </div>
        </div>
    </div>

<!--***********************************转账模态框*************************************************-->
    <!-- Modal -->
    <div class="modal fade" id="transfer-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">转账</h4>
                </div>
                <div class="modal-body" id="transfer-modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">A用户名</label>
                            <div class="col-sm-6">
                                <p class="form-control-static" id="transfer-name"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">A余额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="transfer-money" name="money" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">A转账金额</label>
                            <div class=" col-sm-6">
                                <input type="number" id="transfer-sub-money" name="sub-money">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">B用户名</label>
                            <div class="col-sm-6">
                                <p class="form-control-static" id="transfer-name2"></p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm-transfer-money">确认转账</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>